<template>
  <div id="app">
    <!-- 导航 -->
    <el-row>
      <el-col :span="24">
        <el-header>

          <h3>游戏后台管理系统</h3>
        </el-header>
      </el-col>
    </el-row>
    <el-row class="bod">
      <el-col :span="12" class="navLeft">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <!-- 第一部分 -->
          <el-submenu index="1">
            <template slot="title">
              <span>赛事模式</span>
            </template>
            <el-submenu index="1-1">
              <template slot="title">房间信息</template>
              <el-menu-item index="1-1-1">比赛记录</el-menu-item>
              <el-menu-item index="1-1-2">牌型概率</el-menu-item>
            </el-submenu>
          </el-submenu>

          <!-- 第二部分 -->
          <el-menu-item index="2">
            <span slot="title">游戏配置</span>
          </el-menu-item>

          <!-- 第三部分 -->
          <el-menu-item index="3">
            <span slot="title">比赛记录</span>
          </el-menu-item>

          <!-- 第四部分 -->
          <el-submenu index="4">
            <template slot="title">
              <span>提示功能</span>
            </template>
            <el-menu-item index="1-4-1">修改</el-menu-item>
          </el-submenu>

          <!-- 第五部分 -->
          <el-submenu index="5">
            <template slot="title">
              <span>用户信息</span>
            </template>
            <el-menu-item index="1-5-1">充值记录</el-menu-item>
            <el-menu-item index="1-5-2">提现记录</el-menu-item>
          </el-submenu>
          <!-- 第六部分 -->
          <el-menu-item index="6">
            <span slot="title">签到模块</span>
          </el-menu-item>
          <!-- 第七部分 -->
          <el-menu-item index="7">
            <span slot="title">任务模块</span>
          </el-menu-item>
          <el-menu-item index="8">
            <span slot="title">奖励模块</span>
          </el-menu-item>
          <el-menu-item index="9">
            <span slot="title">充值记录</span>
          </el-menu-item>
          <el-menu-item index="10">
            <span slot="title" :route="{name:'Food'}">提现记录</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" style="height:100%;">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
  }
  .el-header {
    height: 60px;
    padding-left: 50px;
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    box-sizing: border-box;
    background-color:#81C7D4;
    border-bottom:1px solid white;
    color:white;
  }
  .el-header img {
    height: 48px;
    width: auto;
    margin-right: 18px;
  }
  .navLeft{
    width:200px;
  }
  .bod{
    display:flex;
  }
</style>
